<template>
  <div>
    <a-qrcode
      ref="qrcodeCanvasRef"
      value="http://www.antdv.com"
      color="red"
      bg-color="blue"
      error-level="H"
    />
    <br />
    <br />
    <a-button
      type="primary"
      @click="dowloadChange"
    >Downlaod</a-button>
  </div>
  <a-popover :overlay-inner-style="{ padding: 0 }">
    <template #content>
      <a-qrcode
        value="http://www.antdv.com"
        :bordered="false"
      />
    </template>
    <img
      width="100"
      height="100"
      src="https://aliyuncdn.antdv.com/logo.png"
    />
  </a-popover>
</template>
<!-- <script setup>
import { ref } from 'vue';
const qrcodeCanvasRef = ref();
const dowloadChange = async () => {
  const url = await qrcodeCanvasRef.value.toDataURL();
  const a = document.createElement('a');
  a.download = 'QRCode.png';
  a.href = url;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};
</script>-->
<script> 
export default {
  name: '',
  components: {},
  data() {
    return {
      text: 'https://www.antdv.com/',
      size: 100,
      qrcodeCanvasRef: '',
    }
  },
  created() { },
  mounted() { },
  methods: {
    async dowloadChange() {
      const url = await this.$refs.qrcodeCanvasRef.toDataURL();
      console.log(url);
      const a = document.createElement('a');
      a.download = 'QRCode.png';
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
